<template>
  <!-- <div>{{ age }}</div>
  <input type="text" v-model="age" />
  <el-button type="success">成功</el-button>
  <div class="demo-color-block">
    <span class="demonstration">With default value</span>
    <el-color-picker v-model="color1" />
  </div> -->
  <h1>添加</h1>
  <div>
    姓名<input type="text" v-model="name" /><br />
    年龄<input type="text" v-model="age" /><br />
    电话<input type="text" v-model="phone" /><br />
    <el-button type="success" @click="add">添加</el-button>
  </div>
  <div v-for="(item, index) in list" :key="item.id" v-stripe="index">
    {{ item.name }}---{{ item.age }}岁---电话{{ item.phone }}---<button
      @click="del(item.id)"
    >
      删除
    </button>
  </div>
  <button @click="score">排序</button>
  <button @click="fn">跳转</button>
  <button @click="open">弹框</button>
  <teleport to="body">
    <div class="block" v-show="is">
      <div class="tips">
        <h1>提示框</h1>
        <button @click="close">关闭</button>
      </div>
    </div>
  </teleport>
</template>

<script>
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  // 自定义一个数组对象，要求包含，姓名，手机号，年龄，等等信息，展示在你的列表页面。
  // 同时，可以点击年龄实现排序。默认的时候，希望是顺序排序（生命周期）（要有add 和delete），
  // 实现隔行换色，要求定义一个自定义指令。在main。ts中（单选，多选，复选，下拉框。）
  setup() {
    // const color1 = ref("#409EFF");
    // var num = ref(2025);
    let list = reactive([
      { id: 1, name: "张三", age: 32, phone: 15836799581 },
      { id: 2, name: "李四", age: 28, phone: 17379350827 },
      { id: 3, name: "王五", age: 41, phone: 15592730023 },
      { id: 4, name: "赵六", age: 12, phone: 18032691263 },
    ]);
    let arr = reactive([
      { id: 1, name: "张三", age: 32, phone: 15836799581 },
      { id: 2, name: "李四", age: 28, phone: 17379350827 },
      { id: 3, name: "王五", age: 41, phone: 15592730023 },
      { id: 4, name: "赵六", age: 12, phone: 18032691263 },
    ]);
    let name = ref("");
    let age = ref("");
    let phone = ref("");
    let autoID = 5;
    let is = ref(false);
    let sort = arr.sort((a, b) => a.age - b.age);
    list.splice(0, list.length);
    sort.forEach((item) => {
      list.push(item);
    });
    // let age = computed(() => {
    //   return num.value + 20;
    // });
    // let age = computed({
    //   get() {
    //     return num.value + 20;
    //   },
    //   set(value) {
    //     num.value = 1;
    //   },
    // });
    // return { num, age, color1, list };

    //添加
    function add() {
      list.push({
        id: autoID,
        name: name.value,
        age: age.value,
        phone: phone.value,
      });
      arr.push({
        id: autoID,
        name: name.value,
        age: age.value,
        phone: phone.value,
      });
      autoID++;
    }
    //删除
    function del(id) {
      let new_list = list.filter((item) => item.id != id);
      list.splice(0, list.length);
      new_list.forEach((item) => {
        list.push(item);
      });
    }
    //排序
    function score() {
      let new_list = arr.sort((a, b) => a.age - b.age);
      list.splice(0, list.length);
      new_list.forEach((item) => {
        list.push(item);
      });
    }
    //跳转
    let router = useRouter();
    function fn() {
      router.push({
        path: "/router",
        query: {
          id: 99,
          name: "猪猪辉",
        },
      });
    }
    //打开弹框
    function open() {
      is.value = true;
    }
    //关闭弹框
    function close() {
      is.value = false;
    }
    return { list, add, name, age, phone, del, score, fn, is, open, close };
  },
};
</script>
<style lang='less' scoped>
.demo-color-block {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.demo-color-block .demonstration {
  margin-right: 16px;
}
.block{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  .tips{
    height: 200px;
    width: 200px;
    background-color: aqua;
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
  }
}
</style>